<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue';
	import { getArticles, getAllArticlesBytnId } from '@/api/article.js';
	import { schBaseInfo } from '@/api/school.js';
	import cookie from '../../store/cookie';

	const articleList = ref(['心理品质提升', '心理科普', '心理百科']);
	const articleCurrentIndex = ref(0);
	const tenantId = ref(uni.getStorageSync('tenantId'))
	const sideArticles = ref([]);
	const allArticlesInfo = ref<any[]>([]);
	// #ifdef APP-PLUS
	const schoolDomain = 'reservation.sx.test.zxzyn.com'
	// #endif
	// #ifndef APP
	// const schoolDomain = window.location.hostname
	// const schoolDomain = 'localhost'
	const schoolDomain = 'reservation.sx.test.zxzyn.com'
	// const schoolDomain =  'stu.sx.test.zxzyn.com'  
	// #endif
	
	const userInfo = ref()
	const cates = ['心理科普', '心理百科', '心理解惑']

	const rtMoudleList = [
		[
			{ name: '心理品质提升', icon: 'pzts', id: '1735205521385209858' },
			{ name: '心理图书', icon: 'xlts', id: '1735205881688506370' },
			{ name: '家校联动', icon: 'jxld', id: '1735206438805323778' },
		],
		[
			{ name: '亲子教育', icon: 'qzjy', id: '1735206484548403202' },
			{ name: '心理图片', icon: 'xltp', id: '1735205680009592834' },
			{ name: '好爸爸', icon: 'hbb', id: '1735206523370881026' },
		],
		[
			{ name: '好妈妈', icon: 'hmm', id: '1735206566429605889' },
			{ name: '孤独是为什么', icon: 'gd', id: '1735206606862696450' },
			{ name: '心理障碍识别', icon: 'xlza', id: '1746444166414901250' },
		]
	]

	onMounted(() => {
		// uni.getStorage({key: 'userInfo', success(res) {
			
		// 	if (res.data) {
		// 		userInfo.value = JSON.parse(res.data).data
		// 	}
		// 	console.log(userInfo.value)
		// }})
		// tenantId.value = uni.getStorageSync('tenantId')
		// console.log(tenantId.value)
		getInfo()
		// // #ifdef APP
		// tenantId.value = uni.getStorageSync('tenantId')
		// // #endif
	});

	const getInfo = () => {
		getSwiperList()
		getDynamicArticle()
		getPsychologicalScienceList()
		getPsychologicalEncyclopediaList()
		getDoubtsList()
	}

	const swiperList = ref([])//轮播图
	const getSwiperList = () => {
		let item = {
			tenantId: tenantId.value,
			artModule: "lbt"
		}
		getAllArticlesBytnId(item).then((res) => {
			swiperList.value = res.data.data.records[0].artInfoImageList;

		})

	}

	const dynamicArticle = ref([])//心理动态
	const getDynamicArticle = () => {
		let item = {
			tenantId: tenantId.value,
			artModule: "xldt"
		}
		getAllArticlesBytnId(item).then((res) => {
			if (res.data.data) {
				dynamicArticle.value = res.data.data.records;
			}

		})
	}

	const psychologicalScienceList = ref([])//心理科普
	const getPsychologicalScienceList = () => {
		let item = {
			tenantId: tenantId.value,
			artModule: "xlkp"
		}
		getAllArticlesBytnId(item).then((res) => {
			psychologicalScienceList.value = [...res.data.data.records];
			showList.value[0] = [...psychologicalScienceList.value]

		})
	}

	const psychologicalEncyclopediaList = ref([])
	const getPsychologicalEncyclopediaList = () => {
		let item = {
			tenantId: tenantId.value,
			artModule: "xlbk"
		}
		getAllArticlesBytnId(item).then((res) => {
			psychologicalEncyclopediaList.value = [...res.data.data.records];
			showList.value[1] = [...psychologicalEncyclopediaList.value]

		})
	}

	const DoubtsList = ref([])
	const getDoubtsList = () => {
		let item = {
			tenantId: tenantId.value,
			artModule: "xljh"
		}
		getAllArticlesBytnId(item).then((res) => {
			DoubtsList.value = [...res.data.data.records];
			showList.value[2] = [...DoubtsList.value]

		})
	}




	const showList = ref([])
	const showIndex = ref(0)
	const changeList = (e) => {
		console.log(e)
		showIndex.value = e

	}
	const navigateTo = (id : any) => {
		uni.navigateTo({
			url: '/pages/index/article/article?id=' + id,
		});
	};

	const navigateToGame = () => {
		uni.navigateTo({
			url: '/pages/game/game',
		});

	}

	const navigateToArticle = (id : Number, title : String) => {
		uni.navigateTo({
			url: `/pages/index/articleList/articleList?id=${id}&title=${title}`,
			// url:'/pages/index/articleList/articleList'
		})
	}
	const reLunchto = (e : string) => {
		uni.reLaunch({
			url: e
		})
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
	<articleTable ref='timer'></articleTable>
	<img :src="'@/../static/img/bgIcon/article.svg'"
		style="opacity: 0.3;width: 45%;position: absolute;top: 50%;right: -3%;" />
	<view @touchend="handleEnd" class="wh100p bg0078BB-003E94 flex-column " style="justify-content: center; align-items: center;">
		<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" title="心理文章"
			@clickLeft="reLunchto('/pages/index/home/home')" customLeft class="absolute" style="top: 0;">
		</Navigator>
		<view class="w100p h100p flex-between" style="padding:3% 2% 1%  2%;box-sizing: border-box; height: 98%;">
			<view class="flex-column " style="width: 55%;">
				<view style="height: 40%;">
					<u-swiper :list="swiperList" indicator indicatorMode="line" :height="'100%'" circular
						style="border-radius: 40px 40px 0px 0px;background-color: transparent;"></u-swiper>
				</view>
				<view class="left-bottom custom " style="flex: 1;max-height: 63%;">
					<uni-section class=" w100p" titleFontSize="28px"
						style="border-radius: 10px;background-color: transparent;" title="心理动态" type="line"
						titleColor="white">
						<view class=" flex-column " style="overflow: scroll;width: 100%;height: 93%;">
							<view class=" flex article-item-box" v-for="(item,index) of dynamicArticle" :key="index"
								style="overflow: hidden;" @click="navigateTo(item.id)">
								<view class="article-img flex">
									<img :src="item.artInfoImageList.length>0&&item.artInfoImageList[0].url? item.artInfoImageList[0].url :'@/../static/img/defaultArticle.jpg'"
										style="width: 100%;height: 100%;" />
								</view>
								<view class="flex-column article-info h100p" style="width:68%;">
									<text class="article-title">{{item.name??'暂无'}}</text>
									<text
										class="article-dec mt16">{{item.artDesc??'暂无'}}</text>
									<view class="flex  " style="flex: 1;align-items: flex-end;">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25"
											viewBox="0 0 24 25" fill="none">
											<path
												d="M12 22.5C17.5229 22.5 22 18.0229 22 12.5C22 6.97715 17.5229 2.5 12 2.5C6.47715 2.5 2 6.97715 2 12.5C2 18.0229 6.47715 22.5 12 22.5Z"
												stroke="#A6A6A6" stroke-width="2" stroke-linejoin="round" />
											<path d="M12.0041 6.5L12.0035 12.5044L16.2432 16.7441" stroke="#A6A6A6"
												stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
										</svg>
										<view class="article-time ml10" style="line-height: 26px;">
											{{item.createTime??'暂无'}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-section>
				</view>
			</view>
			<view class="flex-column h100p" style="width: 42%;justify-content: space-between;">
				<view class="right-Top">
					<view class="uni-margin-wrap wh100p">
						<swiper class="swiper wh100p" :indicator-dots="true" :autoplay="false" :interval="2000"
							:duration="500">
							<swiper-item v-for="(items,index) of rtMoudleList" :key="index">
								<view class="  wh100p flex column-center">
									<view class="classMoudleItem" v-for="(item,index) in items" :key="index"
										>
										<view class="flex-center column-center classMoudleItem-icon" @click="navigateToArticle(item.id,item.name)">
											<img :src="'@/../static/img/index/'+item.icon+'.svg'" class="wh100p" />
										</view>
										<text class="classMoudleItem-title mt16">{{item.name}}</text>
									</view>
									<!-- <i style="flex: 1;"></i> -->
									<!-- <view class="classMoudleItem">
										<view class="flex-center column-center classMoudleItem-icon">
											<img :src="'@/../static/img/home/xlts.svg'" class="wh100p" />
										</view>
										<text class="classMoudleItem-title mt16">心理图书</text>
									</view> -->
									<!-- <view class="classMoudleItem">
										<view class="flex-center column-center classMoudleItem-icon">
											<img :src="'@/../static/img/home/jxld.svg'" class="wh100p" />
										</view>
										<text class="classMoudleItem-title mt16">家校联动</text>
									</view> -->
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="right-Bottom">
					<view style="width:90%; ">
						<gui-segmented-control :items="cates" :itemClass="['right-Bottom-Class-Item']"
							@change="changeList" borderRadius="40px 40px 0px 0px"
							:customClass="[ 'right-Bottom-Class-box']" style="color: white;"
							activeClass="right-Bottom-Class-AcItem"></gui-segmented-control>
					</view>
					<view class='select-article-box' style="overflow: hidden;">
						<view class='wh100p flex-column' style="overflow: scroll;justify-content: start;">
							<view v-for="(item,index) of showList[showIndex]" class="article-list-item flex "
								style="margin-bottom: 3%;" @tap="navigateTo(item.id)">
								<text class="index mr20 flex column-center">{{index+1}}</text>
								<text class="article-list-item-content flex column-center">{{item.name??'暂无'}}</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>

</template>

<style>
	/deep/.custom .u-subsection .u-subsection--button__bar {
		background-color: #2b92ff
	}

	.left-bottom {
		display: flex;
		padding: 20px 40px;
		width: 100%;
		/* justify-content: center; */
		/* align-items: center; */
		box-sizing: border-box;
		border-radius: 0px 0px 40px 40px;
		background: linear-gradient(90deg, rgba(73, 190, 255, 0.40) 0%, rgba(49, 134, 252, 0.40) 100%);
	}

	/deep/.custom .uni-section .uni-section-header__decoration.line {
		width: 5.4px;
		height: 20px;
	}

	/deep/.custom .uni-section .uni-section-header__decoration {
		margin-right: 11px;
		border-radius: 34.667px;
		background: #FFF;
	}

	/deep/.uni-section-content {

		width: 100%;
		height: 95%;
	}

	.article-item-box {
		margin: 1% 0;
		height: calc(46%);
		width: 100%;
		flex-shrink: 0;
		border-radius: 40px;
		background: linear-gradient(180deg, #49BEFF 0%, #3186FC 100%), #FAFAFA;
	}

	.article-img {
		width: 30%;
		height: 100%;

		border-radius: 40px;
		overflow: hidden;
	}

	.article-info {

		padding: 2%;
		margin-left: 18px;
		overflow: hidden;
		height: 100%;
		box-sizing: border-box;
	}

	.article-title {
		color: #FFF;
		font-family: PingFang SC;
		font-size: 54rpx;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.article-dec {
		color: #FFF;
		text-align: justify;
		font-family: PingFang SC;
		font-size: 42rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		/* height: 55%; */
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;

	}

	.article-time {
		color: #EAEAEA;
		font-family: PingFang SC;
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.right-Top {
		height: 28%;
		width: 100%;
		display: flex;
		padding: 0px 5%;
		box-sizing: border-box;
		justify-content: center;
		align-items: flex-start;
		/* flex: 1 0 0; */
		align-self: stretch;
		border-radius: 40px;
		background: linear-gradient(180deg, #E3D694 0%, #E7AD68 100%), #FAFAFA;
	}

	.classMoudleItem {
		display: flex;
		width: 33.3%;
		height: 90%;
		/* padding: 36px 60px 24px 60px; */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 40px;
		/* flex: 1 */
	}

	.classMoudleItem-title {
		color: #FFF;
		font-family: PingFang SC;
		font-size: 28px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;

	}

	.classMoudleItem-icon {
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}

	.right-Bottom {
		display: flex;
		width: 100%;
		height: 68%;
		padding: 18px 0px 0.333px 0px;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		/* gap: -0.333px; */
		flex-shrink: 0;
	}

	.select-article-box {
		/* display: flex; */
		width: 100%;
		height: 100%;
		padding: 48px;

		/* flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start; */
		border-radius: 40px;
		box-sizing: border-box;
		background: rgba(27, 111, 211, 0.80);
		backdrop-filter: blur(2px);
	}

	.article-list-item .index {
		color: #FFF;
		font-family: Hiragino Kaku Gothic Std;
		font-size: 24px;
		font-style: normal;
		font-weight: 800;

	}

	.article-list-item:first-child .index {
		font-family: Hiragino Kaku Gothic Std;
		font-size: 24px;
		font-style: normal;
		font-weight: 800;
		background: linear-gradient(180deg, #FFB68D -9.38%, #FF7558 98.51%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.article-list-item:nth-child(2) .index {
		font-family: Hiragino Kaku Gothic Std;
		font-size: 24px;
		font-style: normal;
		font-weight: 800;

		background: linear-gradient(205deg, #FFD029 16.83%, #FF8500 84.7%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.article-list-item:nth-child(3) .index {
		font-family: Hiragino Kaku Gothic Std;
		font-size: 24px;
		font-style: normal;
		font-weight: 800;

		background: linear-gradient(180deg, #FFE396 0%, #FFD35A 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.article-list-item-content {
		color: #FFF;
		font-family: PingFang SC;
		font-size: 24px;
		font-style: normal;
		font-weight: 400;
		line-height: 30px;
	}
</style>